import React, { PureComponent } from 'react'
import { connect } from "react-redux"
import { LoginWrapper, LoginBox, MyInput, SubBottom } from "./style"
import { action } from "./store"
import { Redirect } from 'react-router-dom';
class Login extends PureComponent {
    render() {
        const { login } = this.props;
        if (!login) {
            return (
                <LoginWrapper>
                    <LoginBox>
                        <MyInput placeholder="请输入账号" ref={input => this.username = input} />
                        <MyInput placeholder="请输入密码" type="password" ref={input => this.pwd = input} />
                        <SubBottom onClick={() => this.props.submitLogin(this.username, this.pwd)}>登录</SubBottom>
                    </LoginBox>
                </LoginWrapper>
            )
        } else {
            return (<Redirect to="/"></Redirect>)
        }
    }
}
const mapState = state => ({
    login: state.getIn(["login", "login"])
})

const mapMethods = (dispatch) => {
    return {
        submitLogin(username, pwd) {
            dispatch(action.loginAsyn(username.value, pwd.value))
        }
    }
}

export default connect(mapState, mapMethods)(Login)
